var map;
var MAP_CONTENT = 'map';
var ABOUT_CONTENT = 'about';
var STRING_EMPTY = '';
var NULL = 'null';

var SCREEN_WIDTH = window.innerWidth;
var SCREEN_HEIGHT = window.innerHeight;

var PHONE_WIDTH = 730;
var PHONE_HEIGHT = 960;


var showContent = function(input) {
	if (input != MAP_CONTENT) {
		$("#main").css("display", "block");
		$("#map_canvas").css("display", "none");
	} else {
		$("#main").css("display", "none");
		$("#map_canvas").css("display", "block");
	}
}

var successFn = function(resp) {
	var data = '';
	if (resp) {
		// getting the data from the response object
		data = resp.data;
	}
	return data;
}

var errorFn = function(resp) {
	//TODO
}

//function to get the data by setting url, filter, success function and error function
var getUserPostion = function(url, phone, successFn, errorFn) {
	// making the ajax call
	$.ajax({
		url : url+'?phone='+phone,
		type : "GET",
		data : phone,
		success : function(resp) {
			// calling the user defined success function
			if (successFn)
				successFn(resp);
		},
		error : function(e) {
			// calling the user defined error function
			if (errorFn)
				errorFn(e);
		}
	});
}

//Get avatar path
var getAvatar = function(user) {
	var avatar = STRING_EMPTY;
	if (user.avatar != NULL) {
		if (user.avatar.length > 20) {
			avatar = user.avatar;
		} else {
			avatar = '/photo?action=display&id='
					+ user.avatar
					+ '&userId='
					+ user.userId;
		}
	} else {
		avatar = '/images/avatar-male.jpg';
	}
	
	return avatar;
} 

var getPopupInfo = function(user) {
	var info = '<div><div>About</div><ul><li>'+
    '<a href="#">Link</a>'+
    '</li><li>Lives in </li><li>From</li><li>Email '
		+ user.email
		+ '</li><li>Phone '
		+ user.phone
		+ ' </li></ul></div>';
	return info;
} 

//set Profile
var setProfile = function(user) {
	var avatar = getAvatar(user);
	//set info to avatar
	$('#avatar').attr('src', avatar);
	$('#username').text(user.firstname + ' ' + user.lastname);
	$('#account').text(user.phone);
	
	//set profile
	if (user.phone != '' && user.phone != 'null') {
		$('#phone').val(user.phone);
	}
	if (user.firstname != '' && user.firstname != 'null') {
		$('#firstname').val(user.firstname);
	}
	
	if (user.lastname != '' && user.lastname != 'null') {
		$('#lastname').val(user.lastname);
	}
	
	if (user.workAndEducation != '' && user.workAndEducation != 'null') {
		$('#workAndEducation').val(user.workAndEducation);
	}
	
	if (user.birthday != '' && user.birthday != 'null' && user.birthday != null) {
//		var array[] = user.birthday.split();
//		if (array.length > 0) {
//			$('#birthdate').text(array[0] + '/' array[1]);
//			$('#birthyear').text(array[2]);
//		}
	}
	
//	if (user.inrestedIn != '' && user.inrestedIn != 'null') {
//		$('#inrestedIn').val(user.inrestedIn);
//	}
//	
//	if (user.relationshipStatus != '' && user.relationshipStatus != 'null') {
//		$('#relationshipStatus').val(user.relationshipStatus);
//	}
//	
//	if (user.mobilePhone != '' && user.mobilePhone != 'null') {
//		$('#mobilePhone').val(user.mobilePhone);
//	}
//	
//	if (user.website != '' && user.website != 'null') {
//		$('#website').val(user.website);
//	}
//	
//	if (user.introduction != '' && user.introduction != 'null') {
//		$('#introduction').val(user.introduction);
//	}
//	
//	if (user.email != '' && user.email != 'null') {
//		$('#email').val(user.email);
//	}
	
}

var getIcon = function(avatar) {
	var sizeX = 100;
	var sizeY = 100;
	var scaledSizeX = 50;
	var scaledSizeY = 50;
	if (SCREEN_WIDTH < 750) {
		var sizeX = 50;
		var sizeY = 50;
		var scaledSizeX = 40;
		var scaledSizeY = 40;
	} 
	
	var icon = {
			url : avatar,
			size : new google.maps.Size(sizeX, sizeY),
			origin : new google.maps.Point(0, 0),
			anchor : new google.maps.Point(17, 34),
			scaledSize : new google.maps.Size(scaledSizeX, scaledSizeY)
		};
	
	return icon;
}

//load map with users
var loadMap = function(users) {
	
	//Get user login to initialize map
	var user = users[0];
	
	//Set profile
	setProfile(user);
	
	//set map options
	var mapOptions = {
		zoom : 8,
		center : new google.maps.LatLng(user.latitude, user.longitude),
		mapTypeId : google.maps.MapTypeId.ROADMAP
	};
	
	//load map with user's position
	map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
	
	var markers = Array();
	var infoWindows = Array();
	
	for ( var i = 0; i < users.length; i++) {
		
		var user = users[i];
		var avatar = getAvatar(user);
		var image = getIcon(avatar);
//		var marker_shape = {coords: [0,0, 50], type: "cirlce"};
		var marker = new google.maps.Marker({
		     position: new google.maps.LatLng(user.latitude, user.longitude),
		     map: map,
		     icon: image,
		     title: user.userId,
//		     shape: marker_shape,
		     animation: google.maps.Animation.DROP,
		     infoWindowIndex : i
		 });
		var marker_shape = marker.getShape();
	    var label = new Label({
	        map: map,
	        title: user.firstname + ' ' + user.lastname
	      });
	    label.bindTo('position', marker, 'position');
	    label.bindTo('text', marker, 'position');
	    
	    var info = getPopupInfo(user);
	    infoWindow = new google.maps.InfoWindow({
			content : info
		});
		//google.maps.event.addListener(marker[i], "click", function (e) { iw[i].open(map, marker[i]); });
		google.maps.event.addListener(marker, "click",function(e) {
							infoWindows[this.infoWindowIndex].open(map, this);
						});
		infoWindows.push(infoWindow);
		markers.push(marker);
	}
}

var initMap = function() {
	
	//Declare function for success result of ajax
	var successFn = function(resp) {
		var data = '';
		if (resp) {
			// getting the data from the response object
			data = resp.data;
			
			//initialize map
			if(data.length > 0)
				loadMap(data);
		}
	}
	
	//load user account from cookie
	var useraccount = $.cookie('useraccount');
	if (useraccount != '' && useraccount != null) {
		//Get user's position
		getUserPostion("/index", useraccount,
				successFn, null);
	} else {//not login
		//Go to index page
		document.location.href = '/index.html';
	}
	
}

